<template>
  <div class="card">
    <div class="icon" :style="{ background: iconBackground }">
      <i :class="`iconfont icon-${icon}`"></i>
    </div>
    <div class="body">
      <slot>
        <div class="title">{{ title }}</div>
        <div class="status">
          <template v-if="message.status == 0">
            <el-icon class="is-loading"><Loading /></el-icon>
            思考中
          </template>
        </div>
        <div class="fold" v-if="message.childrens?.length">
          <el-icon @click="message.expand = !message.expand">
            <ArrowDown v-if="message.expand" />
            <ArrowRight v-else />
          </el-icon>
        </div>
      </slot>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  icon: String,
  title: String,
  iconBackground: String,

  message: String,
})
</script>
<style lang="scss" scoped>
.card {
  background-color: #f0f0f0;
  width: 236px;
  border-radius: 6px;
  padding: 12px 18px;
  display: flex;
}

.icon {
  margin-right: 12px;
  color: #fff;
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.title {
  font-size: 16px;
}

.body {
  flex: 1;
  display: flex;
  align-items: center;
}

.desc {
  color: #999;
  font-size: 12px;
}

.status {
  margin-left: 12px;
}
</style>
